<template>
  <div>
    <div class="body-content">
      <div class="field-title paragraph-p2-light">商品描述</div>
      <div id="prodDescCopy" class="field-text paragraph-p2-light description">
        {{ product.productDesc }}
      </div>
      <input id="copyProdDesc" type="hidden" v-model="product.product_description"/>
    </div>
    <div class="product-prop-2 body-content">
      <div class="field-title paragraph-p2-light">商品照片</div>
      <field-picture-list :picture-list="product.productPictures"></field-picture-list>
    </div>

    <div class="collSpan-div paragraph-p2-heavy" @click="showDetail">
      <span> 商品属性 </span>
      <img v-if="ifShowDetail" src="@/static/icon/arrow-up.png" alt="" />
      <img v-if="!ifShowDetail" src="@/static/icon/arrow-down.png" alt="" />
    </div>
    <div v-if="ifShowDetail" class="body-content" :class="ifShowAllDownload ? 'last-div' : ''">
      <div class="product-prop-3">
        <van-cell-group>
          <van-cell title="货号" v-model="product.productNo" />
          <field-divider></field-divider>
          <van-cell title="分类" v-model="product.category" />
          <field-divider></field-divider>
          <div>
            <div class="field-title paragraph-p2-light">备注</div>
            <div class="field-text paragraph-p2-light">
              {{ product.remark }}
            </div>
          </div>
          <van-cell title="尺寸">
            <template #default>
              <van-tag type="primary" color="#FFF5CC" text-color="#242424">{{ product.productSize }}</van-tag>
            </template>
          </van-cell>
          <field-divider></field-divider>
        </van-cell-group>
        <van-cell-group>
          <!--
          <van-cell title="配件">
            <template #default>
              <van-tag v-for="(item, i) in product.productFitting"
                       :key="'accessoriesTag' + i"
                       class="margin-left-4"
                       type="primary" color="#FFF5CC" text-color="#242424" >{{ item }}</van-tag>
            </template>
          </van-cell>
          <field-divider></field-divider>
          <van-cell title="数量" v-model="product.productNum" />
          <field-divider></field-divider>
          -->
          <van-cell title="成本价(¥)" v-model="product.costPrice" />
          <field-divider></field-divider>
          <van-cell title="销售价(¥)" v-model="product.salePrice" />
          <field-divider></field-divider>
          <van-cell title="零售价($)" v-model="product.retailPrice" />
          <field-divider></field-divider>
        </van-cell-group>
      </div>
      <div class="product-prop-2 padding-bottom-50" :class="!product.attachmentPictures || product.attachmentPictures.length === 0 ? 'last-div' : ''">
        <div class="field-title paragraph-p2-light">
          <span>附件</span>
          <div class="product-act-item" v-if="ifShowAllDownload && product.attachVideos.length > 0" @click="downloadVideo">
            <span class="paragraph-p3-heavy">视频下载</span>
          </div>
        </div>
        <field-picture-list :picture-list="product.attachmentPictures"></field-picture-list>
      </div>
    </div>
    <button-center v-if="ifShowAllDownload" :button-name="'一键下载'" @click.native="allDownload"></button-center>
  </div>
</template>
<script>
import {
  Popup,
  Divider,
  Field,
  CellGroup,
  Button,
  Cell,
  Grid,
  GridItem,
  ActionSheet,
  Tag,
  Radio,
  RadioGroup,
} from "vant";
import FieldPictureList from '@/components/Field/PictureList'
import FieldDivider from '@/components/Field/Divider'
import ButtonCenter from '@/components/Button/Center'
import {downloadProductInfo, downloadVideo, viewProductDetail} from "@/request/api"
export default {
  name: "ProductInfo",
  components: {
    FieldPictureList,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Divider.name]: Divider,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [ActionSheet.name]: ActionSheet,
    [Tag.name]: Tag,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    FieldDivider,
    ButtonCenter,
  },
  data() {
    return {
      ifShowDetail: true,
      ifShowAllDownload: false,
      product: {
        productNo: '',
        productDesc: '',
        costPrice: '',
        salePrice: '',
        retailPrice: '',
        productSize: '',
        productFitting: [''],
        category: '',
        productNum: '',
        remark: '',
        productPictures: [],
        attachmentPictures: [],
        attachPics: [],
        attachVideos: [],
      },
    };
  },
  mounted() {
    this.ifShowAllDownload = Number(this.$route.params.type) === this.GLOBAL.listItemType.product.storage
    this.getProductDetail()
  },
  methods: {
    showDetail() {
      this.ifShowDetail = !this.ifShowDetail;
    },
    getProductDetail() {
      viewProductDetail({pathParam: this.$route.params.id}).then(res => {
        const {State, Data} = res
        if (State) {
          const {
            product_code, product_description, product_category, size, accessories, product_quantity, note,
            product_cost_price, product_sale_price, product_retail_price, product_image_list, attachment
          } = Data
          this.product.productNo = product_code
          this.product.productDesc = product_description
          this.product.category = product_category
          this.product.productFitting = accessories
          this.product.productSize = size
          this.product.productNum = product_quantity
          this.product.remark = note
          this.product.costPrice = this.$baseJS.numberFormatter(product_cost_price)
          this.product.salePrice = this.$baseJS.numberFormatter(product_sale_price)
          this.product.retailPrice = this.$baseJS.numberFormatter(product_retail_price)

          if (product_image_list) {
            product_image_list.forEach(productImg => {
              const { cover_image, url } = productImg
              const type = this.$baseJS.getUrlType(url)
              const prodPicItem = { type: type, url: url, coverImage: cover_image }
              this.product.productPictures.push(prodPicItem)
            })
          }
          if (attachment) {
            attachment.forEach(attachmentImg => {
              const { cover_image, url } = attachmentImg
              const type = this.$baseJS.getUrlType(url)
              const attachmentItem = { type: type, url: url, coverImage: cover_image }
              if (this.$baseJS.typeIsVideo(type)) {
                this.product.attachVideos.push(attachmentItem)
              } else {
                this.product.attachPics.push(attachmentItem)
              }
            })
            if (this.product.attachPics && this.product.attachPics.length > 0) {
              this.product.attachPics.forEach(attachPic => this.product.attachmentPictures.push(attachPic))
            }
            if (this.product.attachVideos && this.product.attachVideos.length > 0) {
              this.product.attachVideos.forEach(attachPic => this.product.attachmentPictures.push(attachPic))
            }
          }
        }
      })
    },
    allDownload() {
      this.$loading.show()
      downloadProductInfo({pathParam: this.$route.params.id}).then(res => {
        const {State, Data} = res
        if (State) {
          if (Data instanceof Array) {
            Data.forEach(prodPic => {
              if (prodPic) { this.downloadImage(prodPic) }
            })
          }
        }
        this.$loading.close()
      }).catch( () => { this.$loading.close() })
      this.copyRes()
    },
    downloadVideo() {
      // this.downloadOneVideo('https://flyn.oss-cn-hangzhou.aliyuncs.com/douyin.mp4')
      downloadVideo({pathParam: this.$route.params.id}).then(res => {
        const {State, Data} = res
        if (State) {
          if (Data instanceof Array) {
            Data.forEach(videoData => {
              const { url } =  videoData
              if (url) {
                if (this.$baseJS.typeIsVideo(this.$baseJS.getUrlType(url))) {
                  this.downloadOneVideo(url)
                }
              }
            })
          }
        }
      })
    },
    downloadImage(prodPicUrl) {
      if (!window.plus) {
        document.addEventListener('plusready', self.plusReady, false)
      }
      // eslint-disable-next-line no-undef
      plus.gallery.save(prodPicUrl,
          //成功回调
          function () {},
          //失败回调
          function () {});
    },
    downloadOneVideo(attachVideoUrl) {
      if (!window.plus) {
        document.addEventListener('plusready', self.plusReady, false)
      }
      const imgUrl = attachVideoUrl;
      const type = imgUrl.indexOf('.mov') > 0 ? '.mov' : '.mp4'
      const suffix = new Date().getTime() + type /*保存的文件名*/
      // eslint-disable-next-line no-undef
      const downLoader = plus.downloader.createDownload(imgUrl, {
        method: 'GET',
        filename: '_downloads/image/' + suffix
      }, function(download, status) {
        const fileName = download.filename
        console.log('文件名:' + fileName)
        console.log('下载状态：' + status)
        // eslint-disable-next-line no-undef
        plus.gallery.save(fileName, function() {})
      })
      downLoader.start()
    },
    copyRes() {
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea')
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = this.product.productDesc
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 选中值并复制
      textarea.select()
      textarea.setSelectionRange(0,textarea.value.length)
      document.execCommand('Copy')
    },
  },
};
</script>

<style scoped>
.field-title {
  padding-top: 16px;
  color: #242424;
}
.field-text {
  text-align: justify;
  color: #737373;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 8px 16px 16px 16px;
}
.product-prop-2 {
  margin: 8px auto;
}
.collSpan-div {
  width: 375px;
  height: 60px;
  padding-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}
.collSpan-div > span {
  padding-top: 32px;
  padding-bottom: 16px;
  width: 60px;
}
.collSpan-div > img {
  padding-top: 32px;
  padding-bottom: 16px;
  padding-left: 4px;
  height: 16px;
  width: 16px;
}
.product-act-item {
  display:inline-block;
  width: 64px;
  height: 22px;
  margin-left: 10px;
  border-radius: 8px;
  /*padding: 2px 8px 2px 8px;*/
  padding-top: 2px;
  background: #FFF5CC;
}
.product-act-item > span {
  padding: 8px;
}
</style>
<style>
.van-cell {
  height: 54px;
  padding: 16px 0px !important;
  font-family: PingFang SC;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: left;
}
</style>
